<!-- 热门景点搜索 -->
<template>

	<view class="content">
		<view class="content-block">
			<View class="block1">
				<view class="search">
					<u--input v-model="name" border="none" clearable placeholder="搜索景点..." prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
					<tui-text class="search-text" text="搜索" @click="searchEvent"></tui-text>
				</view>
			</View>
			<view class="block3">
				<view class="dropDownBox" style="text-align: center;">
					<u-tabs :activeStyle="{
        color: '#4186f5',
		fontSize:'32rpx',
		width:'300rpx',
        fontWeight: '800',
        transform: 'scale(1)'
    }" :inactiveStyle="{
		        color: '#606266',
				fontSize:'32rpx',
				width:'300rpx',
		        transform: 'scale(1)'
		    }" :list="tabs" @change="handleChange"></u-tabs>
				</view>
			</view>
			<view class="block2">
				<block v-for="(item,index) in PopularRoute2" v-if="current == 0" :key="index">
					<luxian :objData="item"></luxian>
				</block>
				<block v-for="(item,index) in popularSite" v-if="current == 1" :key="index">
					<jingdian :objData="item"></jingdian>
				</block>
			</view>
			<view class="block5">
				<view v-if="current == 0" class="">
					<view v-if="PopularRoute2.length < totalOne" class="">
						<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
					</view>

					<view v-else class="noMore">
						<tui-nomore backgroundColor="#F2F2F2" text="到底了 "></tui-nomore>
					</view>
				</view>

				<view v-if="current == 1" class="">
					<view v-if="popularSite.length < totalTwo" class="">
						<u-loadmore line loadmoreText="滑动加载更多" status="loadmore" @loadmore="loadmore" />
					</view>

					<view v-else class="noMore">
						<tui-nomore backgroundColor="#F2F2F2" text="到底了 "></tui-nomore>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import jingdian from '@/components/diy/jingdian';
	import luxian from '@/components/diy/luxian';
	import {
		popular_destination,
		Popular_route,
		findRegions,
		findDictTree,
		scenicPage
	} from "@/api/challenge";
	// data 数据 及 方法
	export default {
		components: {
			jingdian,
			luxian
		},
		data() {
			return {
				totalOne: 0,
				totalTwo: 0,
				pageOne: 1,
				pageTwo: 1,
				name: '',
				current: 0,
				tabs: [{
					name: '热门路线'
				}, {
					name: '热门景点'
				}],
				popularSite: [],
				PopularRoute2: [],

			}
		},
		onLoad(data) {
			console.log(data);
			this.name = data.value
			this.destinationEvent()
			this.routeEvent()
		},
		onReachBottom() {
			if (this.current == 0) {
				this.pageOne += 1
				this.routeEvent()
			} else if (this.current == 1) {
				this.pageTwo += 1
				this.destinationEvent()
			}
		},
		methods: {
			loadmore() {
				if (this.current == 0) {
					this.pageOne += 1
					this.routeEvent()
				} else if (this.current == 1) {
					this.pageTwo += 1
					this.destinationEvent()
				}

			},
			searchEvent() {
				this.pageOne = 1
				this.pageTwo = 1
				this.destinationEvent()
				this.routeEvent()
			},
			handleChange(index) {
				this.current = index.index
				console.log(this.current);
			},
			destinationEvent() {
				popular_destination({
					pageNumber: this.pageTwo,
					pageSize: 10,
					name: this.name,
				}).then(res => {
					if (this.pageTwo > 1) {
						res.list.forEach(item => {
							this.popularSite.push(item)
						})
						this.totalTwo = res.total
					} else {
						this.popularSite = res.list
						this.totalTwo = res.total
					}
				})
			},
			routeEvent() {
				Popular_route({
					pageNumber: this.pageOne,
					pageSize: 10,
					query: this.name
				}).then(res => {
					if (this.pageOne > 1) {
						res.list.forEach(item => {
							this.PopularRoute2.push(item)
						})
						this.totalOne = res.total
					} else {
						this.PopularRoute2 = res.list
						this.totalOne = res.total
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC, PingFang SC-Regular;
		height: 100vh;
		background-color: #F2F2F2;
	}

	.block1 {
		width: 100%;
		background-color: #fff;
	}

	.block2 {
		margin-top: 20rpx;
		background-color: #F2F2F2;
	}

	.noMore {
		background-color: #F2F2F2;
		width: 750rpx;
		height: 250rpx;
	}

	.dropDownBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 30rpx;
		background-color: #ffffff;
	}

	.picker-group-row {
		display: flex;
		align-items: center;
	}

	.picker-item {
		display: flex;
		align-items: center;
		margin-right: 20px;
	}

	.content-block {
		background-color: #F2F2F2;
	}

	.blocok5 {
		justify-content: center;
	}

	.block5 {
		display: flex;
		/* 使用Flexbox布局 */
		flex-direction: column;
		/* 设置为垂直方向 */
		align-items: center;
		/* 水平居中 */
		justify-content: center;
		/* 垂直居中 */
		height: 400rpx;
		/* 确保有足够的高度，根据需要调整高度 */
		background-color: #F2F2F2;
	}

	.noMore {
		text-align: center;
	}

	.search {
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #f2f2f2;
		padding: 20rpx 30rpx;
	}
</style>